<template>
  <div>
    <div v-for="(item, index) in data">
      <div class="flex table-row" :class="{'dividing-line': item.dividingLine}">
        <div v-for="col in columns" class="col text-center" :style="getColStyle(col)">
          <div v-if="col.type == 'treeInput'" class="flex" :style="getTreeInputStyle()">
            <i class="el-icon-caret-right" :class="{opend: !item.hideChildren}" :style="{opacity: item.property && item.property.length > 0 ? 1 : 0}" @click="handleIcon(item)"></i>
            <el-input class="flex-1" v-model="item[col.prop]" :disabled="disabledChildren || isDisabled(item, col.prop)"></el-input>
          </div>
          <div v-if="col.type === 'select'">
            <el-select v-model="item[col.prop]" :disabled="disabledChildren || isDisabled(item, col.prop)" @change="selectChange(col.prop, item[col.prop], item)" clearable>
              <el-option v-for="one in col.options" :key="one.value" :value="one.value" :label="one.label"></el-option>
            </el-select>
          </div>
          <div v-if="col.type === 'input'">
            <el-input v-model="item[col.prop]" :disabled="disabledChildren || isDisabled(item, col.prop)"></el-input>
          </div>
          <div v-if="col.type === 'checkbox'">
            <el-checkbox v-model="item[col.prop]" :disabled="disabledChildren || isDisabled(item, col.prop)" @change="selectChange(col.prop, item[col.prop], item)"></el-checkbox>
          </div>
        </div>
        <div v-if="!hideOperationCol" class="col flex-1">
          <!-- <i class="el-icon-plus"></i>
          <i class="el-icon el-icon-delete" style="color: #F56C6C;"></i> -->
          <el-button v-if="!item.hideAddBrother && !disabledChildren" size="mini" style="margin: 0; padding: 7px; border-radius: 0;" @click="operationRow('addBrother', data, index)">添加同级</el-button>
          <el-button v-if="!item.hideAddChild && !disabledChildren && !item.disabledChildren" type="primary" size="mini" style="margin: 0; padding: 7px; border-radius: 0;" @click="operationRow('addChild', data, index)">
            添加子级
          </el-button>
          <el-button v-if="!item.hideDelRow && !disabledChildren" type="danger" size="mini" style="margin: 0; padding: 7px; border-radius: 0;" @click="operationRow('delRow', data, index)">删除</el-button>
        </div>
      </div>
      <div v-if="item.property && item.property.length > 0 && !item.hideChildren">
        <tree-row :data="item.property" :columns="columns" :childIndex="childIndex + 1" :operationRow="operationRow" :disabledChildren="disabledChildren || item.disabledChildren" :setIsDisabled="setIsDisabled"
          :hideChildren="item.hideChildren" :handleIcon="handleIcon" :selectChange="selectChange" :hideOperationCol="hideOperationCol">
        </tree-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeRow',
  props: ['data', 'columns', 'childIndex', 'operationRow', 'disabledChildren', 'setIsDisabled', 'hideChildren', 'handleIcon', 'selectChange', 'hideOperationCol'],
  data() {
    return {
    }
  },
  created() { },
  methods: {
    isDisabled(row, prop) {
      if (this.setIsDisabled) {
        return this.setIsDisabled(row, prop)
      } else {
        return false
      }
    },
    getColStyle(col) {
      if (col.width) {
        return { width: col.width }
      }
      return { flex: 'auto' }
    },
    getTreeInputStyle() {
      let padding = 20 * this.childIndex - 10 + 'px'
      return { 'padding-left': padding }
    },
  }
}
</script>

<style lang='scss' scoped>
.el-icon-caret-right {
  font-size: 24px;
  padding-top: 5px;
  height: 32px;
  color: #999;
  cursor: pointer;

  &.opend {
    transform: rotate(90deg);
  }
}
.col {
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-row {
  padding: 5px 0;
}
.dividing-line {
  border-top: 1px solid #f1f1f1;
}
</style>
